<template>
  <div class="security-people-left">
    <nanning-screen-border-box :bgImg="bgImg">
      <screen-title>态势统计</screen-title>
      <security-people-num></security-people-num>
      <category-percent></category-percent>
      <security-people-statistics></security-people-statistics>
    </nanning-screen-border-box>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import securityPeopleNum from './securityPeopleNum/index.vue'
import categoryPercent from './categoryPercent/index.vue'
import securityPeopleStatistics from './securityPeopleStatistics/index.vue'
@Component({
  name: 'security-people-left',
  components: {
    securityPeopleNum,
    categoryPercent,
    securityPeopleStatistics
  }
})
export default class SecurityPeopleLeft extends Vue {
  private bgImg: string = require('assets/images/situational-awareness/security-left-border.png')
}
</script>

<style lang="scss" scoped>
.security-people-left {
  box-sizing: border-box;
  position: absolute;
  left: 0px;
  top: 0;
  width: calc(25.47%);
  height: 87.13%;
  animation: fadeInLeft 0.7s linear;
  z-index: 1;
}
</style>
